<template>
  <div style="display: flex" class="tempxyz menmuStyle">
    <CCard class="leftCard" style>
      <div class="manageBtn" style>
        <span style="margin-top: 5px"> 发布影像分类</span>

        <CButton
          title="添加"
          variant="outline"
          class="textBtnStyle onButton system-btn-style"
          @click="addMenu"
          data-permission="Btn_yingxiangfabu_TreeAdd"
          >添加</CButton
        >
        <CButton
          title="编辑"
          variant="outline"
          class="textiBtnStyle onButton system-btn-style"
          @click="editMenu"
          data-permission="Btn_yingxiangfabu_TreeXiugai"
          >编辑</CButton
        >
        <CButton
          title="删除"
          variant="outline"
          class="textBtnStyle onButton system-btn-style"
          @click="delMenu"
          data-permission="Btn_yingxiangfabu_TreeDelet"
          >删除</CButton
        >
      </div>
      <div class="imageControl-treeDiv">
        <Menu @on-select="onSelect" style="width: 100%">
          <MenuItem v-for="item in leftTree" :name="item.id" :key="item.id">
            <Icon type="md-document" />
            {{ item.imageClassifyName }}
          </MenuItem>
        </Menu>
      </div>
    </CCard>
    <CCard class="rightCard">
      <CCardHeader class="header-wraper">
        <div class="header-left-titleWraper">
          <span class="textTitle">列表</span>
        </div>
        <div class="header-right-wraper">
          <CButton
            color="info"
            @click="addMapUrl"
            data-permission="Btn_yingxiangfabu_BtnAdd"
            class="system-btn-style"
          >
            <CIcon name="cil-plus" />&nbsp;添加
          </CButton>
        </div>
      </CCardHeader>
      <CCardBody class="card-body">
        <div style="height: calc(100% - 46px)">
          <TableList ref="table" :getColumn="getColumns" :getAxios="getAxios">
            <template v-slot:isRelease="item">
              <Button
                v-if="item.data.row.isRelease === 1"
                type="primary"
                shape="circle"
                size="small"
                ><Icon type="md-checkmark"
              /></Button>
              <Button v-else type="warning" shape="circle" size="small"
                ><Icon type="md-close"
              /></Button>
            </template>
            <template v-slot:Ratiolevel="item">
              <!-- <span>{{item.startLevel}}-{{item.endLevel}}</span> -->
              <Row>
                <Col span="11">
                  <Input v-model="newTask.minRatio" number></Input>
                </Col>
                <Col span="2" style="text-align: center">-</Col>
                <Col span="11">
                  <Input v-model="newTask.maxRatio" number></Input>
                </Col>
              </Row>
            </template>

            <template v-slot:minRatio="item">
              <div>
                {{ item.data.row.minRatio }} - {{ item.data.row.maxRatio }}
              </div>
            </template>

            <template v-slot:show_details="item">
              <CButton
                title="编辑"
                variant="outline"
                class="textBtnStyle onButton system-btn-style"
                @click="update(item.data.row)"
                data-permission="Btn_yingxiangfabu_BtnBianij"
                >编辑</CButton
              >
              <CButton
                title="删除"
                variant="outline"
                class="textBtnStyle onButton system-btn-style"
                @click="delCancel(item.data.row)"
                data-permission="Btn_yingxiangfabu_BtnDelet"
                >删除</CButton
              >
            </template>
          </TableList>
        </div>
      </CCardBody>
    </CCard>

    <!--新建修改任务-->
    <Modal
      v-model="newTask"
      draggable
      scrollable
      :title="courentRowData.id ? '更新影像' : '发布影像'"
      class="newTaskClass"
      :width="800"
    >
      <Form
        ref="formValidate"
        :model="newTaskData"
        :rules="newTaskDataRule"
        :label-width="140"
        style="margin: 25px 25px 40px 30px; word-spacing: 65px"
      >
        <FormItem label="名 称：" prop="name" class="nameClass">
          <Input v-model="newTaskData.name" placeholder="请输入底图名称" />
        </FormItem>
        <FormItem
          label="数 据 地 址："
          prop="imagesPath"
          class="imagepathStyle"
          style="word-spacing: 10px"
        >
          <!-- <Input search enter-button placeholder="Enter something..." /> -->
          <Input
            v-model="newTaskData.imagesPath"
            placeholder="请输入底图地址"
            search
            enter-button="..."
            @on-search="openSelectTree"
          >
          </Input>
        </FormItem>
        <Row>
          <Col span="6">
            <Checkbox v-model="invalidValue"
              ><span class="invalidValueStyle">未设置无效值：</span>
            </Checkbox>
          </Col>
          <Col span="9" class="dataWBStyle">
            数据波段数：
            <InputNumber
              class="dataWBStyle"
              v-model="newTaskData.waveNumber"
              :min="0"
            ></InputNumber>
          </Col>
          <Col span="9" class="dataWBStyle1">
            数据无效值：
            <InputNumber
              class="dataWBStyle2"
              v-model="newTaskData.nodater"
            ></InputNumber>
            <Input v-if="false" v-model="nodaterData" track-by="$index"></Input>
          </Col>
        </Row>
        <FormItem
          label="显示级别（1-20）："
          number
          prop="labelRatio"
          class="labelStyle"
        >
          <RadioGroup v-model="newTaskData.minRatio">
            <Row>
              <Col span="10">
                <!-- <Input v-model="newTaskData.minRatio" number :change = "minRatioCheck"></Input> -->
                <InputNumber
                  v-model="newTaskData.minRatio"
                  :max="firstMax"
                  :min="1"
                ></InputNumber>
              </Col>
              <Col span="2" style="text-align: center; margin-left: 7px">-</Col>
              <Col span="10">
                <!-- <Input v-model="newTaskData.maxRatio" number></Input> -->
                <InputNumber
                  v-model="newTaskData.maxRatio"
                  :max="20"
                  :min="secondMin"
                ></InputNumber>
              </Col>
              <!-- <span>请输入5到20之间的数值！</span> -->
            </Row>
          </RadioGroup>
        </FormItem>
        <FormItem label="公 开：" prop="isRelease" class="pubilcstyle">
          <RadioGroup v-model="newTaskData.isRelease">
            <Radio :label="1">是</Radio>
            <Radio :label="0">否</Radio>
          </RadioGroup>
        </FormItem>
      </Form>
      <template #footer class="footerBtns">
        <CButton @click="newTaskCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="newTaskConfim" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>

    <!--删除任务-->
    <Modal v-model="delShow" draggable scrollable title="删除任务">
      <p slot="header" class="modalHeader">
        <img src="@/assets/icons/shanchu.svg" alt />
        <span style="margin-left: 5px">删除任务</span>
      </p>
      <div class="delKuangBody">
        <p>您正在删除该任务信息</p>
        <p>请确认是否删除?</p>
      </div>
      <template #footer class="footerBtns">
        <CButton @click="delShow = false" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="delOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
    <!-- 添加影像类别 -->
    <Modal
      v-model="addMenuModal"
      draggable
      scrollable
      title="添加数据地址"
      :width="800"
    >
      <p slot="header" class="modalHeader">新建节点</p>
      <CRow>
        <CCol md="12">
          <CForm>
            <CInput
              label="节点名称"
              placeholder="请输入节点名称"
              horizontal
              v-model="newTaskData.Bannername"
            />
          </CForm>
        </CCol>
      </CRow>
      <template #footer class="footerBtns">
        <CButton @click="addNodeCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="addOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
    <!-- 编辑影像类别 -->
    <Modal
      v-model="editMenuModal"
      draggable
      scrollable
      title="编辑数据地址"
      :width="800"
    >
      <p slot="header" class="modalHeader">编辑节点</p>
      <CRow>
        <CCol md="12">
          <CForm>
            <CInput
              label="节点名称"
              placeholder="请输入节点名称"
              horizontal
              v-model="contents.ClassifyName"
            />
          </CForm>
        </CCol>
      </CRow>
      <template #footer class="footerBtns">
        <CButton @click="editNodeCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="editOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
    <!-- 删除影像类别 -->
    <Modal v-model="delMenuShow" draggable scrollable title="删除目录">
      <p slot="header" class="modalHeader">
        <img src="@/assets/icons/shanchu.svg" alt />
        <span style="margin-left: 5px">删除任务</span>
      </p>
      <div class="delKuangBody">
        <p>您正在删除该目录所有信息</p>
        <p>请确认是否删除?</p>
      </div>
      <template #footer class="footerBtns">
        <CButton @click="delMenuShow = false" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="delMenuOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
    <!-- 选择目录弹框 -->

    <FileCatalog
      ref="refFileCatalogModal"
      :modalShow="fileCatalogModal"
      @closed="fileCatalogModalClose"
      @menuOk="fileCatalogModalOk"
    ></FileCatalog>
  </div>
</template>

<script>
import FileCatalog from "@/views/jobProcess/fileCatalog.vue";
import TableList from "@/template/table/TableList";
export default {
  name: "classMapManage",
  components: { TableList, FileCatalog },
  // props: {
  //   modalShow: {
  //     type: Boolean,
  //     default: false,
  //   },
  // },
  created() {
    this.getImageControlTree();
    // this.FreshTable();
    //  this.selectByID();
  },
  data() {
    return {
      nodaterData: [],
      invalidValue: false, //无效值复选框
      /******left部分*********/
      leftTree: [],
      contents: {
        ClassifyName: "",
      },
      /******right部分*******/
      newTaskData: {
        // 新建任务表单项
        name: "",
        imagesPath: "",
        isRelease: 1,
        maxRatio: 20,
        minRatio: 0,
        imageClassifyId: 1,
        Bannername: "",
        nodater: 0,
        waveNumber: 3,
      },
      newTaskDataRule: {
        name: [{ required: true, message: "请输入底图名称", trigger: "blur" }],
        imagesPath: [{ required: true, message: "请输入底图地址" }],
        labelRatio: [
          {
            type: "number",
            max: 20,
            min: 0,
            message: "请输入数字",
            trigger: "change,blur",
          },
        ],
      }, // 新建任务校验
      newTask: false, // 添加任务
      selectDirectoryModal: false,
      courentRowData: {},

      delShow: false,
      fileCatalogModal: false,
      imageClassifyId: 1,
      ClassifyName: "",
      getColumns: [
        {
          title: "名称",
          key: "name",
          className: "centerText",
          width: "120",
        },
        {
          title: "服务地址",
          key: "serviceUrl",
          className: "centerText",
        },
        {
          title: "创建人",
          key: "userName",
          className: "centerText",
          width: "70",
        },
        {
          title: "创建时间",
          key: "createTime",
          className: "centerText",
          width: "150",
        },
        {
          title: "更新时间",
          key: "updateTime",
          className: "centerText",
          width: "150",
        },
        {
          title: "级别",
          key: "minRatio",
          className: "centerText",
          slot: "minRatio",
          width: "120",
        },
        // {
        //   title: "最大级别",
        //   key: "maxRatio",
        //   className: "centerText",
        //   width: "80",
        // },
        {
          title: "是否公开",
          key: "isRelease",
          slot: "isRelease",
          className: "centerText",
          width: "80",
        },

        {
          key: "show_details",
          slot: "show_details",
          title: "操作",
          className: "centerText",
          width: 140,
        },
      ],
      getAxios: {
        url: this.$api.manageApi.getBaseMapByPId, //请求路径
        //  url:'https://piecloud.piesat.cn/205/factory/tool/imageLayer/imageLayerListByCondition' ,
        method: "post", //请求方式
        firstRequest: false,
        dataList: { imageClassifyId: this.imageClassifyId }, //请求参数
      },
      editMenuModal: false,
      addMenuModal: false,
      delMenuShow: false,
      split1: 0.5,
      secondMin: 1,
      firstMax: 20,
    };
  },
  mounted() {
    this.getImageControlTree();
  },
  methods: {
    //验证检查
    minRatioCheck() {
      let minRatio = this.newTaskData.minRatio;
    },
    //目录编辑取消
    editNodeCancel() {
      this.editMenuModal = false;
    },
    // 目录编辑确定按钮
    editOk(item) {
      let that = this;
      let path = this.$api.manageApi.editClassifyBaseMap + this.imageClassifyId;
      let param = {
        imageClassifyName: that.contents.ClassifyName,
      };
      this.http.post(path, param).then((res) => {
        this.editMenuModal = false;
        if (res.data.success) {
          this.$Message.success(res.data.message);
          this.$refs.table.getRefreshTable({
            imageClassifyId: this.imageClassifyId,
          });
          this.FreshTreeLeft();
          this.ClassifyName = JSON.parse(
            JSON.stringify(that.contents.ClassifyName)
          );
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
    //更新左侧树
    FreshTreeLeft() {
      let self = this;
      let path = this.$api.manageApi.getClassifyRoot;
      this.http.get(path).then((res) => {
        if (res.data.success) {
          self.leftTree = res.data.data;
        } else {
          if ((res.data.message = "查询数据为空")) {
            self.leftTree = res.data.data;
          } else {
            this.$Message.error(res.data.message);
          }
        }
      });
    },
    openSelectTree() {
      this.fileCatalogModal = true;
      this.$nextTick((el) => {
        this.$refs.refFileCatalogModal.initFileTree(
          {
            type: { name: "file" },
            constraint: { extensions: "*.tif;*.tiff;*.img;*.pix;*.til;" },
          },
          true
        );
      });
    },
    addMenu() {
      this.addMenuModal = true;
    },
    editMenu() {
      let that = this;
      //   this.http
      //   .get(that.$api.manageApi.imageClassifyListByID + that.imageClassifyId)
      //   .then((res) => {
      //   //  ClassifyName =   res.data.data.imageClassifyName
      //    console.log(ClassifyName)
      //   })
      //   .catch(() => {
      //     that.$Message.error("查询失败，请联系管理员！");
      //   });
      that.contents.ClassifyName = that.ClassifyName;
      // if(that.contents)
      // console.log(that.contents, "that.contentsthat.contents");
      if (that.contents.ClassifyName.length == 0) {
        that.$Message.error("请选择要编辑的目录节点！");
      } else {
        this.editMenuModal = true;
      }
    },
    delMenu() {
      this.delMenuShow = true;
    },
    // 获取对应的id数据
    selectByID() {
      let url =
        that.$api.manageApi.imageClassifyListByID + that.imageClassifyId;
      this.http.get(url).then((res) => {
        this.ClassifyName = res.data.data.imageClassifyName;
      });
    },
    onSelect(data) {
      let that = this;
      that.imageClassifyId = data;
      that.$refs.table.getRefreshTable({
        imageClassifyId: data,
      });
      let url =
        that.$api.manageApi.imageClassifyListByID + that.imageClassifyId;
      this.http.get(url).then((res) => {
        this.ClassifyName = res.data.data.imageClassifyName;
      });
    },
    addMapUrl() {
      this.newTask = true;
      // this.imagespath = [],
      this.courentRowData = {};
      this.newTaskData = {
        // 新建任务表单项
        name: "",
        imagesPath: "",
        isRelease: 1,
        minRatio: "",
        maxRatio: "",
        nodater: 0,
        waveNumber: 3,
      };
      this.invalidValue = false;
    },
    newTaskCancel() {
      this.newTask = false;

      this.$refs.formValidate.resetFields();
      this.$emit("close", false);
      this.courentRowData = {};
    },
    dealwithPath(path) {
      let result = [];
      let arr = path ? path.split(/,|;|#TASK#|#HT#/) : []; //避免手动输入的路径，再做一次调整
      if (
        path &&
        arr.length > 0 &&
        this.currentNode.code === "base_index_select"
      ) {
        result.push(arr[0]);
      } else {
        result = arr;
      }
      this.newTaskData.imagesPath = arr;
      return this.newTaskData.imagesPath;
    },
    //处理选择数据
    dataDetail() {
      if (!this.invalidValue) {
        this.newTaskData.waveNumber = 0;
      } else {
        this.nodaterData = [];
        //处理数组，
        for (let i = 0; i < this.newTaskData.waveNumber; i++) {
          this.nodaterData.push(this.newTaskData.nodater);
        }
        this.newTaskData.nodata = this.nodaterData;
      }
    },
    newTaskConfim() {
      let that = this;
      //数据处理
      this.dataDetail();
      if (this.newTaskData.minRatio > this.newTaskData.maxRatio) {
        alert("显示最小级别需要大于最大级别，请重新输入");
      } else {
        that.$refs.formValidate.validate((valid) => {
          if (valid) {
            that.newTaskData = Object.assign(
              {
                imageClassifyId: that.imageClassifyId,
                userName: that.$store.state.user.userName,
              },
              this.newTaskData
            );
            let url = that.newTaskData.id
              ? that.$api.manageApi.updateImageLayer + that.newTaskData.id
              : that.$api.manageApi.addImageLayer;
            if (that.newTaskData.imagesPath instanceof Array) {
            } else {
              that.newTaskData.imagesPath = that.newTaskData.imagesPath
                ? that.newTaskData.imagesPath.split(/,|;|#TASK#|#HT#/)
                : [];
            }
            that.http
              .post(url, this.newTaskData)
              .then((res) => {
                if (res.status === 200) {
                  that.$refs.table.getRefreshTable({
                    imageClassifyId: that.imageClassifyId,
                  });
                  that.$Message.success("保存成功!");
                  that.newTask = false;
                  that.courentRowData = {};
                } else {
                  that.$Message.error("保存失败！");
                }
              })
              .catch(() => {
                that.$Message.error("保存失败，请联系管理员！");
              });
          } else {
            that.$Message.error("请完整填写表单！");
          }
        });
      }
    },
    update(data) {
      this.newTaskData = JSON.parse(JSON.stringify(data));
      if (data.waveNumber != "0" && "nodata" in data) {
        this.invalidValue = true;
        this.newTaskData.nodater = this.newTaskData.nodata.substring(1, 2);
      }
      this.newTask = true;
      this.courentRowData = JSON.parse(JSON.stringify(data));
    },
    //任务 删除
    delCancel(data) {
      this.delShow = true;
      this.courentRowData = data;
    },
    delOk() {
      let that = this;
      this.http
        .get(that.$api.manageApi.deleteByIdList + that.courentRowData.id)
        .then((item) => {
          if (item.status === 200) {
            that.delShow = false;
            that.$Message.success("删除成功!");
            that.$refs.table.getRefreshTable({
              imageClassifyId: this.imageClassifyId,
            });
          } else {
            that.$Message.error("删除失败！");
          }
        })
        .catch(() => {
          that.$Message.error("删除失败，请联系管理员！");
        });
    },
    fileCatalogModalClose() {
      this.fileCatalogModal = false;
    },
    fileCatalogModalOk(data) {
      // let imagePath = [];
      // imagePath.push(data);
      this.newTaskData.imagesPath = data;

      this.fileCatalogModal = false;
      //   console.log("===", this.fileCatalogModal);
    },
    getImageControlTree() {
      let self = this;
      let path = this.$api.manageApi.getClassifyRoot;
      this.http.get(path).then((res) => {
        if (res.data.success) {
          self.leftTree = res.data.data;
          this.imageClassifyId = res.data.data[0].id;
          return this.FreshTable();
        } else {
          if ((res.data.message = "查询数据为空")) {
            self.leftTree = res.data.data;
          } else {
            this.$Message.error(res.data.message);
          }
        }
      });
    },
    FreshTable() {
      let aa = {
        imageClassifyId: this.imageClassifyId,
      };
      this.$refs.table.getRefreshTable(aa, this.$api.manageApi.getBaseMapByPId);
    },
    delMenuOk() {
      let that = this;
      this.http
        .get(that.$api.manageApi.deleteImageClassifyById + this.imageClassifyId)
        .then((item) => {
          // console.log(item, "删除功能");
          if (item.data.success) {
            that.$Message.success("删除成功!");
            this.getImageControlTree();
          } else {
            that.$Message.error(item.data.message);
          }
          that.delMenuShow = false;
        })
        .catch(() => {
          that.$Message.error("删除失败，请联系管理员！");
        });
    },
    addNodeCancel() {
      this.addMenuModal = false;
    },
    //  addOk(type) {
    addOk() {
      let self = this;
      let path = this.$api.manageApi.addClassifyBaseMap;
      let param = {
        imageClassifyName: this.newTaskData.Bannername,
      };

      this.http.post(path, param).then((res) => {
        if (res.data.success) {
          this.$Message.success("添加成功");
          this.getImageControlTree();
          //  imageClassifyName : this.newTaskData.Bannername
          // self.leftTree = res.config.data;
          //  that.$refs.table.getRefreshTable({
          //   imageClassifyId: res.config.data.id,
          // });
          this.newTaskData.Bannername = "";
        } else {
          this.$Message.error(res.data.message);
        }
        this.addMenuModal = false;
      });
    },
  },
  watch: {
    // "newTaskData.minRatio"(newData) {
    //   newData ? (this.secondMin = newData) : 5;
    // },
    // "newTaskData.maxRatio"(newData) {
    //   newData ? (this.firstMax = newData) : 20;
    // },
  },
};
</script>
<style scoped>
.selectProLine-col {
  border-right: 1px solid #d8dbe0;
}
.col-md-2 {
  padding-right: 10px;
  padding-left: 20px;
}
.col-md-10 {
  padding-right: 20px;
  padding-left: 0px;
}
.manageBtn {
  border-bottom: 1px solid #d8d8d8;
  margin-top: 15px;
  padding-bottom: 15px;
  display: flex;
  justify-content: space-evenly;
}
::-webkit-scrollbar-thumb {
  background-color: #7eb8ee;
}
.dic_tree {
  max-width: 230px;
  overflow-y: auto;
  height: 100%;
}

/* 分页 */
.footerPage {
  display: flex;
  justify-content: flex-end;
  cursor: pointer;
  color: black;
}
.pageContent {
  margin-right: 26px;
  font-size: 14px;
}
.selectStyle {
  display: inline-block;
  width: 100px;
  margin-right: 5px;
}
.productionLine-treeDiv-left {
  max-height: 500px;
  overflow-x: auto;
  overflow-y: auto;
  margin-bottom: -16px;
  margin-right: -16px;
}

.productionLine-treeDiv-right {
  max-height: 500px;
  overflow-x: auto;
  overflow-y: auto;
  margin-bottom: -16px;
  margin-right: -18px;
}

.userTitle {
  margin-bottom: 0 !important;
  margin-top: 5px;
}

.imageControlManage {
  height: 100%;
  overflow-y: auto;
}

.menmuStyle {
  height: 100%;
}
.imageControl-treeDiv {
  overflow-x: hidden;
  overflow-y: auto;
  padding: 10px;
}

.ztree {
  margin: 0;
  padding: 0;
}
.rightCard {
  width: 80%;
  margin-left: 10px;
  flex: 1;
}

.leftCard {
  width: 18%;
}
/deep/.card {
  margin-bottom: 0;
}

/deep/.ivu-table td.centerText {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  text-align: -moz-center;
  text-align: -webkit-center;
}
.onButton:hover {
  color: white;
}
/deep/ footer.page-link:hover {
  background-color: #ffffff;
}
.demo-split {
  height: 200px;
}
.demo-split-pane {
  padding: 10px;
}

.ivu-form-item-label {
  word-spacing: 65px;
}
.invalidValueStyle {
  margin-left: -55px !important;
}
.labelStyle {
  padding-top: 14px;
}
.dataWBStyle {
  margin-top: -4px;
  margin-left: -40px;
}
.dataWBStyle1 {
  margin-top: -4px;
}
.dataWBStyle2 {
  margin-top: -4px;
  margin-left: -40px;
}
</style>



